<template>
  <div>
    <form action="/">
      <van-search
        v-model="Searchtext"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        shape="round"
        @focus="searchresultShow = false"
      />
    </form>
    <!-- 搜索结果部分 -->
    <div class="search-result" v-if="searchresultShow">
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
      >
        <van-cell
          v-for="(item, index) in Suggesstiontext"
          :key="index"
          :title="item"
        />
      </van-list>
    </div>
    <!-- 联想内容部分，输入框有内容才展示 -->
    <van-cell-group v-else-if="Searchtext">
      <van-cell
        :title="item"
        icon="search"
        v-for="(item, index) in Suggesstion"
        :key="index"
        @click="goSearchresult"
      />
    </van-cell-group>
    <!-- 热门搜索部分 -->

    <div class="search-history" v-else>
      <div class="hot-search">
        <van-cell-group>
          <van-cell title="热门搜索" />
        </van-cell-group>
        <div class="hot-search-content">
          <span>论语</span>
          <span>沟通</span>
          <span>领导力</span>
        </div>
        <div class="hot-search-command">
          <p>成功，可以复制吗</p>
          <p>读完不忘的秘密</p>
        </div>
      </div>
      <van-cell title="历史搜索">
        <div v-if="deleteshow">
          <span @click="allDelete">全部删除&nbsp;&nbsp;</span>
          <span @click="deleteshow = false">完成</span>
        </div>
        <van-icon v-else name="delete-o" @click="deleteshow = true" />
      </van-cell>
      <!-- 历史记录 -->
      <van-cell
        :title="item"
        v-for="(item, index) in searchHistory"
        :key="index"
      >
        <template #right-icon>
          <van-icon
            name="close"
            @click="singlyDelete(index)"
            v-if="deleteshow"
          />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { getsearchsgApi, getsearchtextgApi } from "../utils/api";
import { ref, reactive, watch } from "vue";
import { Toast } from "vant";
import { debounce } from "lodash"; //引入lodash的防抖函数
export default {
  setup() {
    let deleteshow = ref(false);
    let searchresultShow = ref(false);
    const Searchtext = ref("");
    let Suggesstion = ref([]);
    let Suggesstiontext = ref([]);
    let searchHistory = reactive([]);
    // 点击搜索进入搜索结果
    const goSearchresult = () => {
      searchresultShow.value = true;
      onLoad();
    };
    const onSearch = () => {
      searchresultShow.value = true; //此处可以触发搜索触发事件
      // 储存历史记录
      searchHistory.unshift(Searchtext.value);
      onLoad();
      // searchHistory.value = Searchtext.value
      // console.log(searchHistory);
    };
    // 删除单个历史记录
    const singlyDelete = (index) => {
      searchHistory.splice(index, 1);
    };
    // 全部删除历史记录
    const allDelete = () => {
      searchHistory.length = 0;
    };
    const onCancel = () => Toast("取消");
    const state = reactive({
      list: [],
      loading: false,
      finished: false,
    });
    // 监测输入框内容的变化,加入防抖函数
    watch(
      Searchtext,
      debounce(async function () {
        const res = await getsearchsgApi({
          flag: Searchtext.value,
        });
        Suggesstion.value = res.result[0].result;
      }),
      1000 / 60
    );
    // 搜索结果
    const onLoad = async () => {
      // 异步更新数据，在此处请求搜索框的内容显示
      const res = await getsearchtextgApi({
        flag: Searchtext.value,
      });
      console.log(res);
      Suggesstiontext.value = res.result[0].result;
      state.loading = false;
      if (Suggesstiontext.value.length === 10) {
        state.finished = true;
      }
    };
    // 搜索框的内容
    return {
      Searchtext, //这是搜索框的内容
      onSearch,
      onCancel,
      state,
      onLoad,
      searchresultShow, //控制搜索结果是否显示
      deleteshow,
      Suggesstion,
      Suggesstiontext,
      searchHistory,
      singlyDelete,
      allDelete,
      goSearchresult,
    };
  },
};
</script>

<style lang="less" scoped>
.search-result {
  position: fixed;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
.hot-search {
  width: 100%;
  height: 300px;
  span {
    display: inline-block;
    padding: 6px 14px;
    background: #f5f6f8;
    font-size: 13px;
    margin-left: 32.5px;
    font-weight: bold;
    border-radius: 13px;
  }
}
.hot-search-command {
  position: relative;
  width: 100%;
  margin-top: 21px;
}
p {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: bold;
  border: 2px solid #e8e175;
  background: #fff;
  border-radius: 13px;
  margin-left: 32.5px;
}
</style>
